<script setup lang="ts">
import { reactive, ref, watch } from "vue";

const count = ref(0);
const name = ref("123")

type Iperson= {name:string,info:{address:string,phone:string}}
const person =   reactive<Iperson>({
    name:'张三',
    info:{
        address:'世外蓬莱',
        phone:'010-123456789'
    }
})
// 侦听器 单个用法
// watch(count, (newValue, oldValue) => {
//   console.log(newValue, oldValue);
// });
// 监听多个的响应式数据 -- newValue和oldValue是数组 ，顺序按照传入顺序排列
// watch([count,name], (newValue, oldValue) => {
//   console.log("新值"+newValue,"旧值"+ oldValue);
// });

// watch 监听响应式对象中属性的变化
// watch(()=>person.name,(newValue,oldValue)=>{
//     console.log("新值"+newValue,"旧值"+ oldValue);
// })
// watch(()=>person.info.address,(newValue,oldValue)=>{
//     console.log("新值"+newValue,"旧值"+ oldValue);
// })
// watch(()=>person.info.phone,(newValue,oldValue)=>{
//     console.log("新值"+newValue,"旧值"+ oldValue);
// })
 
//()=>person.info 都可以
watch(person,(newValue,oldValue)=>{
    console.log("新值"+newValue,"旧值"+ oldValue);
},{
    deep:true, // 开启深度监听
    immediate:true // 初始化的时候执行一次
})


</script>

<template>
  <h1>Watch最简单用法</h1>
  <button @click="count--">-</button>
  <span>{{ count }}</span>
  <button @click="count++">+</button>
  <input type="text" v-model="name">

  <h1>Watch监听属性的变化</h1>
  <ul>
    <li v-for="(value,key,index) in person" :key=" index">
        {{ value }}
    </li>
  </ul>
  <button @click="person.name='李四'">修改名字</button>
  <button @click="person.info={address:'横刀断浪',phone:'020-987654321'}">修改信息</button>
  <button @click="person.info.address='哈哈哈哈'">深度修改</button>
</template>

<style scoped></style>
